/**
 * create by Alec
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { createForm } from "rc-form";
import autobind from "autobind-decorator";

// components
import Box from "../../components/Box/box";

// modules
import ListHeader from './listHeader';

// utils
import { openLink } from '../../utils/dingtalk.js'

const BoxItem = Box.Item;

const mapper = {
    totalFullTime: '全职',
    totalPartTime: '兼职',
    totalInternShip: '实习',
    totalOther: '其他',
    totalRegular: '正式',
    totalProbationary: '试用期',
    totalPendingDismission: '待离职'
}
const routerMapper = {
    totalFullTime: 1,
    totalPartTime: 2,
    totalInternShip: 3,
    totalOther: 9,
    totalRegular: 3,
    totalProbationary: 2,
    totalPendingDismission: 5
}
//将store注入组件的props
const mapStateToProps = () => ({});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
    //区分绑定到props的action与传递的props
    actions: bindActionCreators(
        {
            dispatch,
        },
        dispatch
    )
});

@connect(mapStateToProps, mapDispatchToProps)
class PersonnelList extends Component {
    static defaultProps = {};
    //propTypes 验证
    static propTypes = {
        actions: PropTypes.shape({
            dispatch: PropTypes.func.isRequired,
        })
    };
    constructor(props) {
        super(props);
        this.state = {};
    }
    /**
     * 员工状态类型跳转
     * @param {*路由地址} router 
     */
    @autobind
    linkTo(router, item) {
        const { period = 'week' } = this.props;
        const { currentDate = '', query } = this.props.urlParam || {};
        const { deptId = '' } = query || {};
        //数字为0的也可点击 @媛英
        // if(!item[1] || item[1] === 0) {
        //     return;
        // }
        window._rlog(`_stat_to_${item[0]}`);
        
        if(item[0] === 'totalRegular' || item[0] === 'totalProbationary' || item[0] === 'totalPendingDismission') {
            openLink(`#/statisticList?change=entryByStatus&status=${router}&currentDate=${currentDate}&deptId=${deptId}&period=${period}`)
        } else {
            openLink(`#/statisticList?change=entryByType&type=${router}&currentDate=${currentDate}&deptId=${deptId}&period=${period}`)
        }
    }
    render() {
        const { title, color, data = {} } = this.props || {};
        const list =  Object.entries(data).map((item, index) => {
            return (
                <div className={item[1] === 0 && 'data-empty'} key={index} >
                    <BoxItem text={item[1]} 
                        linkText={mapper[item[0]]} 
                        onClick={() => {
                            window._rlog(`_stat_to_dept`);
                            this.linkTo(routerMapper[item[0]], item)}
                        }
                    />
                </div>
            )
        });

        return (
            <div className="personnel-list">
                <ListHeader title={title} color={color} />
                <Box cols={4}>
                    {list}
                </Box>
            </div>
        );
    }
}
export default createForm()(PersonnelList);
